<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有品生活</title>
    <!-- 引入本页面样式 -->
    <link rel="stylesheet" href="./css/life.css">
    <!-- 引入字体图标样式 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3349201_jda2zq0omfo.css">
</head>
<body> 
    <!-- 主体 -->
    <main class="main">
        <!-- 头部 -->
        <header class="header">
            <h2>有品生活</h2>
            <nav>
                <span class="on">精选</span>
                <span>直播</span>
                <span>居家</span>
                <span>数码</span>
                <span>品牌圈</span>
            </nav>
            <div></div>  
        </header>
        <div class="main-nav">
            <div>
                <span></span>
                <span>数码圈子</span>
            </div>
            <div>
                <span></span>
                <span>新品速递</span>
            </div>
            <div>
                <span></span>
                <span>三伏天</span>
            </div>
            <div>
                <span></span>
                <span>不可能研究</span>
            </div>
            <div>
                <span></span>
                <span>租房好物</span>
            </div>
        </div>
        <div class="main-content">
            <div>
                <img src="./images/sh3_05.png">
                <p>想瘦哪里瘦哪里？都是骗人的</p>
                <p>
                    <img src="./images/tmh1_03.png" alt="">
                    YESOUL野小兽 2774阅读
                </p>
            </div>
            <div>
                <img src="./images/sh4_05.png">
                <p>方便好看，功能多！多功能笔形工具</p>
                <p>
                    <span><img src="./images/xg2_03.png" alt="">王二蛋</span> 1W+阅读
                </p>
            </div>
            <div>
                <img src="./images/xxj_03.png">
                <p>方便好看，功能多！多功能笔形工具</p>
                <p>
                    <span><img src="./images/s6.png" alt="">王二gou</span> 1W+阅读
                </p>
            </div>
            <div>
                <img src="./images/zc1_03.png">
                <p>方便好看，功能多！多功能笔形工具</p>
                <p>
                    <span><img src="./images/ms_03.png" alt="">王二蛋</span> 1W+阅读
                </p>
            </div>
        </div>
    </main>
    <!-- 底部 -->
    <footer class="footer">
        <div class="iconfont icon-shouye">
            <p>首页</p> 
        </div>
        <div class="iconfont icon-fenlei">
            <p>分类</p>
        </div>
        <div class="iconfont icon-shenghuo">
            <p>生活</p>
        </div>
        <div class="iconfont icon-gouwuche">
            <p>购物车</p>
        </div>
        <div class="iconfont icon-wode">
            <p>我们</p>
        </div>
    </footer>
</body>
</html>